<template>
    <div>
<!--        题目 &#45;&#45; {{searchParam}}{{searchMessage}}-->
<!--        {{searchMessage.rows}}-->
        <div v-if="searchMessage && searchMessage.rows && searchMessage.rows.length">
            <div v-for="item in searchMessage.rows">
                <div class="ExerciseItem" @click="toQuestion(item)">
                    <div style="white-space:nowrap;overflow: hidden;text-overflow:ellipsis;">
                        <span class="name">
                            <div v-if="item.stem && item.stem.match(/<[^>]+>|&[^>]+/ig).length == 2">
                                <p v-html="item.stem"></p>
                            </div>
                            <div v-else>
                                <p>{{item.stem.split('</p>')[0].match(/[\u4e00-\u9fa5]/g).join("")}}</p>
                            </div>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <el-empty v-else description="暂无试题" />
        <div v-if="searchMessage.pagination" style="margin-top:30px">
            <el-pagination
                    background
                    v-model:currentPage="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="searchMessage.pagination.count"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
    import { watchEffect,ref } from 'vue'
    import {complexSearch} from "@/api/api";
    import {useRouter} from "vue-router";

    export default {
        name: "question",
        props:{
            subject_id:{
                type:String
            },
            subject_name:{
                type:String
            },
            searchParam: {
                type:String,
                default:''
            }
        },
        setup(props){
            let router = useRouter();
            let pageSize = ref(10);
            let currentPage = ref(1);
            let searchMessage = ref([]);
            let getComplexSearch = () =>{
                complexSearch({type:'topic',content:props.searchParam,courseID:localStorage.getItem('activeCourse'),page:currentPage.value,pageSize:pageSize.value}).then(res =>{
                    console.log('搜索题目内容',res)
                    searchMessage.value = res.data
                })
            }
            getComplexSearch();
            watchEffect(() =>{
                let activeCourse = props.subject_id;
                let searchParam = props.searchParam;
                console.log('activeCourse',activeCourse);
                console.log('searchParam',searchParam);
                getComplexSearch();
            })
            const handleSizeChange = (val) => {
                console.log(`${val} items per page`)
                pageSize.value = val;
                getComplexSearch();
            }
            const handleCurrentChange = (val) => {
                console.log(`current page: ${val}`)
                currentPage.value = val;
                getComplexSearch();
            }

            let toQuestion = (item) =>{
                console.log('item',item)
                router.push({
                    name: 'Collect_or_Question',
                    params: {subject_name: localStorage.getItem('activeCourseName'), id: item.id, method: 'collectTopic'}
                })
            }

            return{
                toQuestion,
                pageSize,
                currentPage,
                searchMessage,
                handleSizeChange,
                handleCurrentChange
            }
        }
    }
</script>

<style scoped>
    .ExerciseItem .name{
        color: rgba(11, 67, 128, 1);
        font-size: 14px;
        font-weight: 400;
    }
    .ExerciseItem{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 30px;
        padding: 0px 20px;
        background-color:  rgba(248, 248, 248, 1);
        margin-bottom: 10px;
        border-radius: 10px;
        cursor: pointer;
    }
</style>
